<template>
    <div class="content">
        <div class="heading">菜单</div>
        <el-container>
            <el-header style="margin-left: 100px">
                <el-menu
                        :default-active="activeCategory"
                        class="el-menu-top"
                        mode="horizontal"
                        @select="handleTopMenuSelect"
                >
                    <el-menu-item index="new">最新</el-menu-item>
                    <el-menu-item index="popular">热销</el-menu-item>
                    <el-menu-item index="recommended">推荐</el-menu-item>
                </el-menu>
            </el-header>
            <el-container>
                <el-aside width="80px">
                    <el-menu
                            :default-active="activeSubCategory"
                            class="el-menu-side"
                            @select="handleCategorySelect"
                    >
                        <el-menu-item
                                v-for="item in formList"
                                :key="item.id"
                                :index="item.id.toString()"
                        >
                            {{ item.label }}
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <div class="dishes">
                        <div v-for="dish in dishes" :key="dish.id" class="dish-card">
                            <img :src="'http://localhost:8501' + dish.image" class="dish-image">
                            <div class="dish-info">
                                <div>
                                    <h3>{{ dish.name }}</h3>
                                    <p>价格：¥{{ dish.price }}</p>
                                </div>
                                <el-button v-if="dish.status===1" type="warning" @click="order(dish)">点餐</el-button>
                                <el-button v-else type="danger">已下架</el-button>
                            </div>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import {addShopCarApi, getDishCateApi, getDishDataApi} from "@/api/dish";
import * as http from "http";

export default {
    computed: {
        http() {
            return http
        }
    },
    data() {
        return {
            activeCategory: "new",
            activeSubCategory: "1",
            formList: [],
            dishes: [],
        };
    },
    created() {
        this.init();
        this.loadDishes();
    },
    methods: {
        async init() {
            try {
                // 1. 发起请求获取分类数据
                const {data} = await getDishCateApi({pageNum: 1, pageSize: 100});
                // 2. 渲染分类数据
                this.formList = data.list.map(item => ({label: item.label, id: item.id}));
                // 默认选择第一个分类，或者你可以根据需要修改默认分类逻辑
                if (this.formList.length > 0) {
                    this.activeSubCategory = this.formList[0].id.toString();
                    await this.loadDishes(this.activeSubCategory);
                }
            } catch (error) {
                console.error("Failed to fetch category data:", error);
            }
        },
        async loadDishes(categoryId) {
            try {
                // 发起请求获取菜品数据
                const {data} = await getDishDataApi({pageNum: 1, pageSize: 100, categoryId: categoryId});
                this.dishes = data.list;
            } catch (error) {
                console.error("Failed to fetch dish data:", error);
            }
        },
        handleTopMenuSelect(index) {
            this.activeCategory = index;
            // 你可以根据 index 调用 API 获取对应分类的菜品数据
        },
        handleCategorySelect(index) {
            this.activeSubCategory = index;
            this.loadDishes(index);
        },
        order(dish) {
            addShopCarApi(JSON.parse(this.$store.state.userInfo).id, dish).then(res => {
                this.$message.success(`已点 ${dish.name}`);
            })
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
  position: absolute;
  top: 50px;
  left: 240px;
  right: 0;
  padding: 20px;
  margin: 10px auto;
  max-width: 1200px;
  background-color: #FFF;
  min-height: 400px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.dishes {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  flex-grow: 1;
  padding-left: 20px;
}

.dish-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 8px;
  width: 200px;
  height: 150px;
  position: relative;
}

.dish-image {
  width: 100%;
  max-height: 100px;
  height: auto;
  border-radius: 8px;
}

.dish-info {
  position: absolute;
  bottom: 0;
  width: 90%;
  margin: 10px auto;
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .button {
    width: 40px;
    margin-top: 10px;
  }
}
</style>